<template>
  <div id="patientShiftLogDetail" class="mainContent">
    <div class="information" v-if="JSON.stringify(patientData) != '{}'">
      <div class="row" >
        <div class="col-sm-8" style="display: flex;align-items: center;height:36px;padding:0;">
          <div class="col-sm-4" style="display: flex;align-items: center;justify-content:center;">
            <span>日期：</span>{{shiftLogData.ARCHIVEDATE | formatDates}}
            <!--<vue-datepicker-local  v-model="emptyTime" clearable :isShow ="true"/>-->
          </div>
          <div class="col-sm-4" style="display: flex;align-items: center;padding:0;">
            <span>班次：</span>
            <div class="select" v-clickoutside="handleClose">
              <p :class="{'up' : isShowShift}" @click="showShift">{{shift}}</p>
              <ul :class="['list-link',{'show': isShowShift}]">
                <li v-for="(item,index) in tab" :key="item.value"
                    @click="changeShift($event)">
                  {{item.label}}
                </li>
              </ul>
            </div>
          </div>
          <div class="col-sm-4" >
            <span>填写人：</span><input type="text"  v-model="shiftLogData.ARCHIVEDBY" style="width:calc(100% - 80px);max-width:80px;border:1px solid #ccc;border-radius:4px;height:34px;line-height:34px;font-size:15px;padding-left:5px;"/>
          </div>
        </div>
        <div class="col-sm-4">
          <button @click="btnUpdate">更新</button>
          <button @click="btnSave">保存</button>
          <button @click="btnPrint">打印</button>
        </div>
      </div>
    </div>
    <!--交班日志信息-->
    <div class="handOverContent" v-if="JSON.stringify(patientData) != '{}'">
      <!--入院基本信息-->
      <div class="admission ">
        <div class="title"><span>入院情况</span></div>
        <div class="row">
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">主 诉：</label>
            <div class="col-sm-8 ">
              <textarea  class="textarea" v-grow-height="true" v-model="shiftLogData.CHIEF_COMLPAINT"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">现病史：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.PRESENT_ILL_HISTORY" ></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">既往史：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.PREVIOUS_HISTORY"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">药物史：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.MEDICATION_HISTORY"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">过敏史：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.ALLERGY_HISTORY"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">入ICU诊断：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.INICU_DIAGNOSIS"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label for="inReason" class="col-sm-3  control-label text-right col-lg-2 " style="margin-top:6px;">入ICU原因：</label>
            <div class="col-sm-8 ">
              <input type="text" class="form-control" id="inReason" placeholder="请输入原因" v-model="shiftLogData.AMDITTING_REASON">
            </div>
          </div>
        </div>
      </div>
      <!--病情信息-->
      <div class="Condition">
        <div class="title"><span>病情信息</span></div>
        <div class="row">
          <!--<div class="form-group clearfix">
    <label class="col-sm-3  control-label text-right col-lg-2 ">神 经：</label>
    <div class="col-sm-8 ">
      <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.NEURO_LOG"></textarea>
    </div>
  </div>
  <div class="form-group clearfix">
    <label class="col-sm-3  control-label text-right col-lg-2 ">循 环：</label>
    <div class="col-sm-8 ">
      <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.CIRCULATORY_LOG"></textarea>
    </div>
  </div>
  <div class="form-group clearfix">
    <label class="col-sm-3  control-label text-right col-lg-2 ">呼 吸：</label>
    <div class="col-sm-8 ">
      <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.RESP_LOG"></textarea>
    </div>
  </div>
  <div class="form-group clearfix">
    <label class="col-sm-3  control-label text-right col-lg-2 ">感 染：</label>
    <div class="col-sm-8 ">
      <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.INECTED_LOG"></textarea>
    </div>
  </div>
  <div class="form-group clearfix">
    <label class="col-sm-3  control-label text-right col-lg-2 ">肾功能：</label>
    <div class="col-sm-8 ">
      <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.RENAL_LOG"></textarea>
    </div>
  </div>
  <div class="form-group clearfix">
    <label class="col-sm-3  control-label text-right col-lg-2 ">肝功能：</label>
    <div class="col-sm-8 ">
      <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.HEPATIC_LOG"></textarea>
    </div>
  </div>
  <div class="form-group clearfix">
    <label class="col-sm-3  control-label text-right col-lg-2 ">凝 血：</label>
    <div class="col-sm-8 ">
      <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.COAGULATION_LOG"></textarea>
    </div>
  </div>
  <div class="form-group clearfix">
    <label class="col-sm-3  control-label text-right col-lg-2 ">血 液：</label>
    <div class="col-sm-8 ">
      <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.BLOOD_LOG"></textarea>
    </div>
  </div>
  <div class="form-group clearfix">
    <label class="col-sm-3  control-label text-right col-lg-2 ">内分泌：</label>
    <div class="col-sm-8 ">
      <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.ENDO_LOG"></textarea>
    </div>
  </div>-->
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">神 志：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.MIND_LOG"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">氧疗方式：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.OXYGENTHERAPY_LOG"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">营 养：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.NUTRITION_LOG"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">心 率：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.HeartRate"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">血 压：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.BloodPressure"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">体 温：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.Temperature"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">镇痛药物：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.ANALGESIA_MED_LOG"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">镇静药物：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.CALM_MED_LOG"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">血管活性药物：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.BLOOD_MED_LOG"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">血 糖：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.BLOODSUGAR_LOG"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">小 便：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.URINE_LOG"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">大 便：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.SHIT_LOG"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">液体平衡：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.FLUID_BALANCE"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">导管留置：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.LINES_LOG" style="padding-left:15px;text-indent:0;"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">DVT预防：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.DVT_LOG"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">PPI：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.PPI_LOG"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">微生物：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.MICROORGANISM_LOG" style="padding-left:15px;text-indent:0;"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">抗生素：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.ANTIBIOTIC_LOG" style="padding-left:15px;text-indent:0;"></textarea>
            </div>
          </div>

        </div>
      </div>
      <!--治疗计划信息-->
      <div class="DailyPlan">
        <div class="title"><span>治疗计划</span></div>
        <div class="row">
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">昨日计划：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.YESTODAY_PLAN" rows="8"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">夜 间：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.NIGHT_PLAN" rows="8"></textarea>
            </div>
          </div>
          <!--<div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">今日计划：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.TODAY_PLAN"></textarea>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-sm-3  control-label text-right col-lg-2 ">会 诊：</label>
            <div class="col-sm-8 ">
              <textarea class="textarea" v-grow-height="true" v-model="shiftLogData.CONSULTATION_LOG"></textarea>
            </div>
          </div>-->
        </div>
      </div>
    </div>
    <loading v-if="JSON.stringify(patientData) == '{}'&& isShow"></loading>
    <noSearch v-if="JSON.stringify(patientData) == '{}' && !isShow"></noSearch>
  </div>
</template>
<script>
  import { formatDate } from "@/components/common/date"; //引入时间转换JS
  import { apiGetPatientShiftLogById, apiUpdateShiftLog, apiUploadShiftLog} from '@/api/api';  //引入保存交班信息数据方法和查询方法
  import VueDatepickerLocal from '@/components/datepicker/VueDatepickerLocal'  //引入时间选择组件
  import Bus from "@/components/common/bus"; //引入公共媒介JS BUS
  import loading from '@/components/loading/loading'
  import noSearch from '@/components/search/noSearch' //导入没有搜索结果组件
  import axios from 'axios';
  export default {
    data() {
      return {
        shiftLogData: {}, //存储当前详情页的所有数据
        patientData: {},
        emptyTime: '', //选择的时间
        isShow: true,
        isShowShift: false,
        shift: 'A 班',
        src: '',
        tab: [
          { label: 'A 班', value: 1 },
          { label: 'P 班', value: 2 },
          { label: 'N 班', value: 3 }
        ],
      }
    },
    created() {
      this.src = axios.defaults.baseURL;
    
    },
    mounted() {
      //this.loginUser = JSON.parse(sessionStorage.getItem('user'));
      if (this.$route.query.type == 1) {
        this.shift = 'A 班'
      } else if (this.$route.query.type == 2) {
        this.shift = 'P 班'
      } else if (this.$route.query.type == 3) {
        this.shift = 'N 班'
      }
      this.getPatientShiftLog();
      Bus.$on("timePicker", e => {
        this.QCInfoDate = e.trim();
      });
    },
    methods: {
      showShift() {
        this.isShowShift = !this.isShowShift;
      },
      changeShift(event) {
        this.isShowShift = false;
        if ($.trim(event.currentTarget.innerHTML) != this.shift) {  // 当选择的值跟当前的值不一样时
          this.shift= $.trim(event.currentTarget.innerHTML);  //赋值
        }
       

      },
      strWrap(str) {
        if (!str) {
          return str;
        } else {
          return str.replace(/[\\r\\n]/g, '\r\n');
        }
      },
      getPatientShiftLog() {
        if (this.$route.query.status == 1) {  //状态码为0时则为新增否则为编辑
         
          apiGetPatientShiftLogById({
            id: this.$route.query.id,
            patientNo: this.$store.getters.stateData.ID_PAT_IN,
            name: this.$store.getters.patientName,
            type: this.$route.query.type,
            date: this.$route.query.date
          })
            .then(res => {
              //console.log(res)
              this.isShow = true;
              if (typeof (res) == "object" && Object.prototype.toString.call(res).toLowerCase() == "[object object]" && !res.length) {
                //console.log(res)
                this.shiftLogData = res;
                this.patientData = res;
                if (this.shiftLogData.ARCHIVEDBY == null || this.shiftLogData.ARCHIVEDBY == '' ) {
                  //console.log(2222222)
                  this.shiftLogData.ARCHIVEDBY = JSON.parse(sessionStorage.getItem('user')).Name;
                }
                if (this.shiftLogData.SHIFT_TYPE == 1) {
                  this.shift = 'A 班';
                } else if (this.shiftLogData.SHIFT_TYPE == 2) {
                  this.shift = 'P 班';
                } else if (this.shiftLogData.SHIFT_TYPE == 3) {
                  this.shift = 'N 班';
                }
                if (this.shiftLogData.GENDER == "1") {
                  this.$store.state.patientSex = '男';
                } else {
                  this.$store.state.patientSex = '女';
                }
                this.$store.state.patientName = this.shiftLogData.PATIENT_NAME;
                this.$store.state.patientCondition = this.shiftLogData.INICU_DIAGNOSIS;
                this.$store.state.stateData.BedName = this.shiftLogData.BED_NO;
                this.$store.state.stateData.ID_PAT_IN = this.shiftLogData.PATIENT_ID;
              }
            })
            .catch(err => {
              this.isShow = false;
              this.$toast.center('当前数据有问题，请联系管理员');
            }) 
        }
      },
      btnUpdate() {      //更新
        this.$toast.center('正在后台同步数据，请稍后查看……');
        apiUploadShiftLog({
          patientNo: this.shiftLogData.PATIENT_ID,
          name: this.shiftLogData.PATIENT_NAME,
          type: this.$route.query.type,
          date: this.$route.query.date
        })
          .then(res => {
            //console.log(res);
            setTimeout(() => {
              this.getPatientShiftLog();
            },3000)
          })
          .catch(err => {
            this.$toast.center('更新失败，请联系管理员！');
          })
      },
      btnPrint() {
        let date = this.formatDate(this.shiftLogData.ARCHIVEDATE);
        //console.log(date);
        let str = this.src + '/Report/ReportViewer?reportName=PatientShiftLogReport.frx&patientIds=' + this.$route.query.id + '&date=' + date + '&type=2';
        //console.log(str)
        this.$router.push({
          path: '/handOverPrint',
          query: { http: str ,item:3 }
        })
      },
      btnSave() {
        //console.log(JSON.stringify(this.qualityData));
        if (this.shift == 'A 班') {
          this.shiftLogData.SHIFT_TYPE = 1
        } else if (this.shift == 'P 班') {
          this.shiftLogData.SHIFT_TYPE = 2;
        } else if (this.shift == 'N 班') {
          this.shiftLogData.SHIFT_TYPE = 3;
        }
        this.$toast.center('正在保存中，请稍后……');
        this.patientData = {};
        //console.log(this.string);
        apiUpdateShiftLog({    //保存数据
          shiftLogId: this.$route.query.id,
          log: JSON.stringify(this.shiftLogData)
        })
          .then(res => {
            //console.log(JSON.parse(res))
            //console.log(typeof (JSON.parse(res)) == "object" && Object.prototype.toString.call(JSON.parse(res)).toLowerCase() == "[object object]" && !JSON.parse(res).length);
            if (typeof (JSON.parse(res)) == "object" && Object.prototype.toString.call(JSON.parse(res)).toLowerCase() == "[object object]" && !JSON.parse(res).length) {
              this.getPatientShiftLog();
              setTimeout(() => {
                this.$toast.center('保存成功！！');
              },2500)
            } else {
              setTimeout(() => {
                this.$toast.center('保存失败！！');
              }, 2500)
              
            }
          })
          .catch(err => {
            this.$toast.center('当前请求有问题，保存失败！');
          })
      },
      handleClose() {
        this.isShowShift = false;
      },
      formatDate(time) {
        if (time == '') {
          return ''
        } else {
          var date = new Date(parseInt(time.substring(6, 19)));
          return formatDate(date, "yyyy-MM-dd");
        }
      },
    },
    filters: {
      formatDates(time) {
        if (time == '') {
          return ''
        } else {
          var date = new Date(parseInt(time.substring(6, 19)));
          return formatDate(date, "yyyy-MM-dd");
        }
      },
    },
    components: {
      VueDatepickerLocal,
      loading,
      noSearch,
    }
}
</script>
<style scoped>
  #patientShiftLogDetail {
    padding:20px 0;
  }
  .information{
    padding-left:40px;
    font-size:16px;
    margin-bottom:10px;
  }
    .information span:first-child{
      margin-right:10px;
    }
    .information span {
      margin-right: 150px;
    }
    .information button {
      padding: 7px 15px;
      background-color: #11a7f3;
      color:#fff;
    }
  .control-label {
    font-weight: normal;
    padding-right: 0;
  }
  textarea.textarea {
    width: 100%;
    overflow-y: visible;
    resize: none;
    text-indent: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-height:60px;
  }
  .title {
    font-size: 18px;
    padding-left: 20px;
    margin-bottom: 15px;
    margin-top: 15px;
  }
  .annualReport .title{
    margin-top:0;
  }
  .title span:before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 20px;
    border-radius: 8px;
    margin-right: 8px;
    background: #11a7f3;
    vertical-align: text-top;
  }
  .handOverContent {
    height: calc(100% - 30px);
    padding-bottom: 20px;
    overflow-y: auto;
  }
  .qualitycontent .annualReport .row {
    display: flex;
    align-items: center;
    padding: 15px 5px 15px 15px;
    background-color: #f3f3f3;
  }
  .qualitycontent .row  p {
    text-align: right;
    margin-bottom: 10px;
  }
  .qualitycontent .row .col-sm-6 p:last-child {
    margin-bottom: 25px;
  }
  .qualitycontent .ratio {
    font-size: 15px;
    color: #11a7f3;
    font-weight:bold;
  }
  .row{
    margin:0;
  }
  .qualitycontent .ratio p{
    text-align:center;
  }
  .qualitycontent .ratio p span{
    display:inline-block;
    min-width:60px;
    color:#f00;
    font-size:18px;
    margin-left:15px;
  }
  .prompt {
    max-width: 180px;
    height: 100%;
    background-color: #871C22;
    color:#fff;
    font-size:12px;
    padding:10px;
  }
  .select {
    width: 100px;
    height: 34px;
    line-height: 34px;
    background: #fff;
    padding-left: 10px;
    border: 1px solid #e5e5e5;
  }
    .select p {
      color: #000;
      position: relative;
    }

      .select p:after {
        display: inline-block;
        content: '';
        width: 10px;
        height: 10px;
        background-image: url("../../../../static/images/unfold_arron.png");
        background-repeat: no-repeat;
        background-size: contain;
        vertical-align: middle;
        margin-right: 10px;
        margin-top:12px;
        float:right;
      }

      .select p.up:after {
        background-image: url("../../../../static/images/up_arron.png");
      }

  .list-link {
    position: relative;
    z-index: 9999;
    display: none;
    border: 1px solid #eee;
    left: -10px;
    width: 100px;
    background-color: #fff;
    box-shadow: 2px 5px 5px #ccc;
  }

    .list-link li {
      text-align: center;
      cursor: pointer;
    }

      .list-link li:hover {
        background-color: #f6f6f6;
        border-bottom: 1px solid #ccc;
      }
</style>
